<template>
  <div class="home">
      <!--顶部导航条 -->
      <HeaderBox></HeaderBox>
      <LayoutBox></LayoutBox>
      <BannerBox></BannerBox>
      <div class="am-g am-g-fixed">
          <div class="clock am-u-sm-3">
              <img class="today-commend" src="~/images/recommend/2016.png" alt="">
              <p class="commend-info">今日<br>推荐</p>
          </div>
          <div class="am-u-sm-4 am-u-lg-3">
              <div class="info ">
                  <h3>真的有鱼</h3>
                  <h4>开年福利篇</h4>
              </div>
              <div class="recommendationMain one">
                  <img src="~/images/recommend/tj.png" alt="">
              </div>
          </div>
          <div class="am-u-sm-4 am-u-lg-3">
              <div class="info ">
                  <h3>囤货过冬</h3>
                  <h4>让爱早回家</h4>
              </div>
              <div class="recommendationMain two">
                  <img src="~/images/recommend/tj1.png " alt="">
              </div>
          </div>
          <div class="am-u-sm-4 am-u-lg-3">
              <div class="info ">
                  <h3>浪漫情人节</h3>
                  <h4>甜甜蜜蜜</h4>
              </div>
              <div class="recommendationMain three">
                  <img src="~/images/recommend/tj2.png " alt="">
              </div>
          </div>
      </div>
  </div>
</template>
<script lang="ts" setup>
import HeaderBox from '@/views/index/components/headerBox.vue'
import BannerBox from "@/views/index/components/bannerBox.vue";
import LayoutBox from "@/views/index/components/layoutBox.vue";
</script>
<style lang="scss" scoped>
.am-u-sm-3{
    display: none;
    width: 25%;
    .today-commend{
        width: 100%;
    }
}
[class*="am-u-"] {
    padding-left: 1rem;
    padding-right: 1rem;
    float: left;
    position: relative;
}
@media only screen and (min-width: 1025px) {
    .am-g-fixed{
        max-width: 1000px;
        margin: 0 auto;
    }
  .clock{
    color: #FFFFFF;
    display: block;
    height: 145px;
    position: relative;
    background: url("../../assets/images/recommend/clockbg.png") repeat;
    .today-commend{
      position: absolute;
      width: 120px;
      right: 10%;
      top: 15px;
    }
    .commend-info{
      position: absolute;
      top: 50%;
      left: 12%;
      margin-top: -31px;
      font-size: 24px;
    }
  }
  .am-u-lg-3{
    width: 25%;
  }
}
</style>

